<html>

<head>
    <title>Demo leaflet.TileLayer.WMTS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
    <script src="../lib/leaflet/leaflet.js"></script>
    <script src="../lib/proj4-src.js"></script>
    <script src="../lib/leaflet/proj4leaflet.js"></script>
</head>

<body>
    <div id="map" style="height: 100%; width: 100%"></div>
    <script>



        /**
         * 加载本地arcgis切片类
         * 
         * @author ful
         * @date 2014-09-03
         * @copyright (c) 
         */

        /**
         * 继承自TileLayer
         * @param {Object} tomcat中映射该切片目录url
         * @param {Object} options
         */
        L.TileLayer.TileLoad = L.TileLayer.extend({
            initialize: function (url, options) {
                options = L.setOptions(this, options);
                this.url = url + "/{z}/{x}/{y}.png";
                L.TileLayer.prototype.initialize.call(this, this.url, options);
            }
        });

        /**
         * 重写TileLayer中获取切片url方法
         * @param {Object} tilePoint
         */
        L.TileLayer.prototype.getTileUrl = function (tilePoint) {
            return L.Util.template(this._url, L.extend({
                s: this._getSubdomain(tilePoint),
                z: function () {
                    var value = tilePoint.z.toString(16);
                    return "L" + pad(value, 2);
                },
                x: function () {
                    var value = tilePoint.y.toString(16);
                    return "R" + pad(value, 8);
                },
                y: function () {
                    var value = tilePoint.x.toString(16);
                    return "C" + pad(value, 8);
                }
            }));
        };

        L.tileLayer.tileLoad = function (url, options) {
            return new L.TileLayer.TileLoad(url, options);
        };

        /**
         * 高位补全方法
         * @param {Object} 数字类型字符串
         * @param {Object} 总位数，不足则高位补0
         */
        var pad = function (numStr, n) {
            var len = numStr.length;
            while (len < n) {
                numStr = "0" + numStr;
                len++;
            }
            return numStr;
        };

        var origin = [-20037508.3427892, 20037508.3430388];//图层起点坐标
        var resolutions = [
            156543.032// Level 0
            , 78271.516// Level 1
            , 39135.758// Level 2
            , 19567.879// Level 3
            , 9783.940 // Level 4
            , 4891.970 // Level 5
            , 2445.985 // Level 6
            , 1222.992 // Level 7
            , 611.496 // Level 8
            , 305.748 // Level 9
        ];
        var crs = new L.Proj.CRS(
            '',
            '+proj=merc +lon_0=0 +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs', {
            origin: origin,
            resolutions: resolutions
        }
        );
        var map = L.map('map', {
            crs: crs,
            continuousWorld: true,
            worldCopyJump: false
        }).setView([23.39552, 113.308189], 4);
        map.on('mousemove', function (evt) {
            // console.log(evt.latlng.lng)
            // console.log(evt.latlng.lat)
            var prefix = `${evt.latlng.lng.toFixed(3)}，${evt.latlng.lat.toFixed(3)}`
            map.attributionControl.setPrefix(prefix)
        })

        map.remove();
        crs = new L.Proj.CRS('EPSG:900913',
            '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs',
            {
                resolutions: function () {
                    level = 19
                    var res = [];
                    res[0] = Math.pow(2, 18);
                    for (var i = 1; i < level; i++) {
                        res[i] = Math.pow(2, (18 - i))
                    }
                    return res;
                }(),
                origin: [0, 0],
                bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
            });

        map = L.map('map', {
            crs: L.CRS.EPSG3857,
            continuousWorld: true,
            worldCopyJump: false
        }).setView([23.39552, 113.308189], 4);

        var tileLayer = new L.TileLayer.TileLoad('http://localhost:8080/_alllayers', {
            maxZoom: 9,
            minZoom: 1,
            continuousWorld: true
        });
        tileLayer.addTo(map);


        var acline330kV = { "type": "FeatureCollection", "name": "dcline_1100kV", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [{ "type": "Feature", "count": 1003, "properties": { "id": "1100001", "cus_type": "直流线路", "voltage_type": "2000", "state": 1003, "flag": 0, "name": "1100kv测试线路1" }, "geometry": { "type": "LineString", "coordinates": [[88.46391800514245, 37.523832277383406], [89.59625615560827, 37.29898032856216], [90.66568663104823, 37.1487043795695], [91.23185570628114, 37.2238797829945], [91.70366326897522, 37.09854588335539], [92.52146304431166, 37.07345417321435], [92.83600141944105, 37.048354157798336], [93.33926281964808, 36.922729574275984], [93.9997934074198, 36.67085871770702], [94.18851643249745, 36.62038522149703], [95.69830063311855, 36.16463784396169], [96.17010819581263, 36.21540830639639], [96.98790797114907, 36.24078119238847], [99.0009535719772, 35.91029232910563], [99.69293799726185, 35.6039951757778], [100.82527614772768, 35.116619363597934], [102.36651418586173, 34.755622515963246], [103.78193687394399, 34.72977628287226], [104.69409816181924, 34.70392196501459], [106.01515933736269, 34.72977628287226], [109.1290892511437, 34.393040542708476], [110.35578891414835, 34.393040542708476], [113.97298022813641, 33.92454685747109], [114.72787232844695, 33.663152000728516], [115.73439512886101, 33.40096050994125], [116.23765652906806, 33.24326450896062], [116.61510257922333, 33.085283505086466], [117.24417932948212, 32.821350365747286], [118.18779445487029, 32.76846925118617], [119.06850190523262, 32.9798048403184], [119.94920935559492, 32.87420001958384], [119.94920935559492, 32.87420001958384]] } }] };
        L.geoJSON(acline330kV).addTo(map);

    </script>
</body>

</html>